<template>
  <div class="container">
    <div class="content-left">
      <img src="../../assets/images/logo.png" alt="" />
      <p>安全评价项目管理平台</p>
    </div>
    <div class="content-right">
      <el-dropdown class="dropdown">
        <div class="dropdown-content">
          <img src="../../assets/images/logo.png" alt=""/>
          <span v-if="currentUsername">{{ user_show(currentUsername) }}</span><i class="el-icon-arrow-down"></i>
        </div>
        <el-dropdown-menu slot="dropdown" class="dropdown-content-menu">
          <el-dropdown-item icon="el-icon-switch-button">
            <span @click="logout">退出登录</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
  import { mapState } from "vuex";

  export default {
    name: "Header",
    data(){
      return{

      }
    },
    computed:{
      ...mapState({
        currentUsername: (state => state.currentUser)
      })
    },
    methods: {
      user_show(nickname){
        // this.$store.commit("getUser")
        if (nickname.length > 5){
          return nickname[0] + nickname[1] + nickname[2] + '...'
        }else {
          return nickname
        }
      },
      logout(){
        this.$store.commit("logout")
        this.$message("退出成功")
      },
    }
  }
</script>

<style lang="scss" scoped>
  .container{
    background-color: lightslategray;
    height: 60px;
    .content-left{
      width: 280px;
      text-align: center;
      float: left;
      font-size: 20px;
      font-family: Bahnschrift,serif;
      padding: 16px;
      img{
        width: 30px;
        height: 30px;
        margin: 0 -4px 0 -24px;
      }
      p{
        float: right;
        margin:5px 8px 0 -24px;
      }
    }
    .content-right{
      float: right;
      margin:6px 20px;
      /*下拉列表样式*/
      .dropdown{
        width: 140px;
        cursor: pointer;
        .dropdown-content{
          display: inline-block;
          float: right;
          img{
            width: 30px;
            height:30px;
            border-radius: 50%;
            position: relative;
            top: 10px;
            right: 5px;
          }
        }

        /*下拉菜单样式*/
        .dropdown-content-menu{
          width: 100px;
          text-align: center;
        }
      }
    }
  }
</style>
